
<template>
<div class = "leaveamessage" >
   <el-container  v-loading = "loading">
    <el-container>
    <el-main>
    <el-card class="box-card">
              <div class = "title-wrapper">
                <!-- <el-input style="float:left;width:200px;"  v-model="searchinput" placeholder="请输入内容"></el-input>
                <el-button>搜索</el-button> -->
             <el-select style="float:right" v-model="value" placeholder="请选择状态" @change="qwe">
                  <el-option
                    v-for="item in options"
                    :key="item.label"
                    :label="item.label"
                    :value="item.value"
                   >
                  </el-option>
                </el-select>
              </div>
              <div class = "area">
              </div>
            <div class = "baseList-wrapper">
        <el-table
        :data="tableData"
        style="width: 100%"
        >
            <el-table-column
            label="ID"
            prop="id"
            width="150"
            align="center">
            </el-table-column>
            <el-table-column
            label="状态"
            prop="status"
            align="center"
            >
            </el-table-column>
            <el-table-column
            label="姓名"
            prop="evaluator.name"
            align="center"
            >
            </el-table-column>
            <el-table-column
            label="留言基地"
            prop="baseName"
            align="center"
            >
            </el-table-column>
            <el-table-column
            label="内容"
            align="center"
            >
            <template slot-scope="scope" >
                <el-popover trigger="hover" placement="top" >
                <p style="width:300px;" >{{ scope.row.content }}</p>
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">内容</el-tag>
                </div>
                </el-popover>
            </template>
            </el-table-column>
             <el-table-column
            label="留言时间"
            prop="createdAt"
            align="center"
            >
            </el-table-column>
            <el-table-column label="操作" align="center" >
            <template slot-scope="scope">
                <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">{{content}}</el-button>
                <el-button
                size="mini"
                @click="handleDelete(scope.$index, scope.row)" v-if = "value === 'review'">取消通过</el-button>
            </template>
            </el-table-column>
          </el-table>
          <div class = "pagination" style="margin:15px 0;float:right">
          <el-pagination
            background
             @current-change="handleCurrentChange" 
            layout="prev, pager, next"
            :total="totalCount">
          </el-pagination>
          </div>
            </div>
               </el-card>
    </el-main>
    </el-container>
   </el-container>
</div>
</template>
<script>
import Vue from 'vue'
import transitionTime from "../../transitionTime"
export default {
    data(){
        return{
          content:'通过',
          loading:false,
          searchinput:'',
          tableData:[],
        options: [
        {value: 'review',
          label: '审核中'
        },{
          value: 'success',
          label: '已通过',
        },{
          value: 'fail',
          label: '未通过'
        }],
        value:'review',
        dialogVisible:false,
        tableData:[],
           // 默认显示第几页
           currentPage:1,
           // 总条数，根据接口获取数据长度(注意：这里不能为空)
           totalCount:10,
           Params:{
             status:'review',
             page_no:1,
             per_page:10
           }
        }
    },
    created() {
        this.List()
    },
    methods:{
        List(){
          this.loading = true
            this.$api.leaveamessage.leaveamessageList(this.Params).then(res => {
                this.tableData = res.data.rows
                this.transitionTime(res)
                this.transitionStatus(this.tableData)
                if(res.data.pageCount){
                    this.totalCount = res.data.pageCount * 10
                } else {
                    this.totalCount = 10
                }
            this.loading = false
            }).catch(err => {
                console.log(err)
                this.loading = false
            })
        },
        //通过审核
        handleDelete(index,item){
          this.$confirm('是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).then(() => {
          this.loading = true
          let Add = {
                status:'fail', //fail
                weight:item.weight
          }
          this.$api.leaveamessage.leaveamessagepass(Add,item.id).then(res => {
                if(res.code === 200){
                    this.tableData = this.tableData.filter(data => data.id !== item.id)
                }
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.loading = false
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        },
        handleEdit(index,item){
          this.$confirm('是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          let Add = {
                status:'', //fail
                weight:item.weight
            }
            if(this.value == "success"){
              Add.status = 'fail'
            } else if(this.value == "fail" || this.value == "review") {
              Add.status = 'success'
            } 
          this.$api.leaveamessage.leaveamessagepass(Add,item.id).then(res => {
                if(res.code === 200){
                    this.tableData = this.tableData.filter(data => data.id !== item.id)
                }
          })
          this.$message({
            type: 'success',
            message: '审核通过!'
          });
          this.loading = false
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
        },
      //转换状态参数
      transitionStatus(Data){
        for(let i = 0; i < Data.length; i++){
         if(Data[i].status === 'success'){
           Data[i].status = '已通过'
         } else if(Data[i].status === 'review'){
           Data[i].status = '审核中'
         } else {
           Data[i].status = '未通过'
         }
        }
      },
      //下拉列表
       qwe(item){
          this.loading = true
          this.Params.page_no=1
          this.totalCount=10
          if(item === 'fail'){
            this.content = '通过'
          } else if(item === 'success') {
            this.content = '取消通过'
          }  else {
            console.log('1')
            this.content = '通过'
          }
          this.Params.status = item
          this.List()
          this.loading = false
       },
       handleCurrentChange(val) {
           // 改变默认的页数
           this.Params.page_no=val
           this.List()
       },
       transitionTime(res){
            for(let i = 0; i< res.data.rows.length; i++){
                if(res.data.rows[i].createdAt){
                 this.tableData[i].createdAt = transitionTime(res.data.rows[i].createdAt)
                }
                if(!res.data.rows[i].evaluator){
                  Vue.set(res.data.rows[i],'evaluator',{})
                  Vue.set(res.data.rows[i].evaluator,'name','游客')
                }
            }
        },
    }
}
</script>
<style scoped>

</style>

